import React, { Component } from "react";
import {nanoid} from 'nanoid'
import PropTypes from 'prop-types'
export default class extends Component {
static propTypes={
addTodo:PropTypes.func.isRequired
}
  handlekeyUp = (event) => {
    //解构赋值获取keyCode，target
    const { keyCode, target } = event;
    //判断是否是回车按键
    if (keyCode != 13) return;
    //添加的todo名字不能为空
    if(target.value.trim()===''){
      alert('输入不能为空')
      return
    }
    //准备好一盒todo对象
    const todoObj = { id: nanoid(), name: target.value, done: false };
    this.props.addTodo(todoObj);
    //清空输入
    target.value=''
  };
  render() {
    return (
      <div className="todo-header">
        <input
          type="text"
          onKeyUp={this.handlekeyUp}
          placeholder="请输入你的任务名称，按回车键确认"
        />
      </div>
    );
  }
}
